<script setup>
const props = defineProps({
  title:String,
  bannerList:Array
})


</script>



<template>
  <div class="home-contain">
    <div class="home-banner">
      <el-carousel style="height: 400px;">
        <el-carousel-item v-for="item in bannerList" :key="item.id" style="height: 400px;">
          <img :src="item.imgUrl" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.home-contain {
  // width: 1240px;
  display: flex;
  background-color: #fff;

  .home-banner {
    flex-grow: 1; /* 使轮播图区域占用剩余空间 */
    height: 400px;
    overflow: hidden; /* 防止超出 */
    background-color: blue;
    el-carousel {
      height: 100%; /* 使轮播图适应父元素高度 */
    }
  }

  img {
    width: 100%;
    height: 100%; /* 确保图片填满父容器 */
    object-fit: cover; /* 保持图片比例，填充容器 */
  }
}
</style>
